<template>
  <div class="education-list-form">
    <div class="section-header">
      <h3 class="section-title">教育经历</h3>
      <el-button type="primary" size="small" @click="addEducation">
        <el-icon><Plus /></el-icon>
        添加教育经历
      </el-button>
    </div>
    
    <div v-if="educationList.length === 0" class="empty-state">
      <el-empty description="暂无教育经历，请添加" />
    </div>
    
    <div v-else class="education-items">
      <div 
        v-for="(education, index) in educationList" 
        :key="index"
        class="education-item"
      >
        <div class="education-header">
          <span class="education-title">教育经历 {{ index + 1 }}</span>
          <el-button 
            type="danger" 
            size="small" 
            @click="removeEducation(index)"
            :disabled="educationList.length === 1"
          >
            <el-icon><Delete /></el-icon>
            删除
          </el-button>
        </div>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label="'学校'" :prop="`educationList.${index}.school`" required>
              <el-input 
                v-model="education.school" 
                placeholder="请输入学校名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="'专业'" :prop="`educationList.${index}.major`" required>
              <el-input 
                v-model="education.major" 
                placeholder="请输入专业名称"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label="'学历'" :prop="`educationList.${index}.degree`" required>
              <el-select 
                v-model="education.degree" 
                placeholder="请选择学历"
                style="width: 100%"
                clearable
              >
                <el-option label="高中" value="high_school" />
                <el-option label="专科" value="college" />
                <el-option label="本科" value="bachelor" />
                <el-option label="硕士" value="master" />
                <el-option label="博士" value="phd" />
                <el-option label="博士后" value="postdoc" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="'在读时间段'" :prop="`educationList.${index}.period`" required>
              <el-date-picker
                v-model="education.period"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { Plus, Delete } from '@element-plus/icons-vue'

export default {
  name: 'EducationList',
  components: { Plus, Delete },
  props: {
    modelValue: {
      type: Array,
      default: () => []
    }
  },
  emits: ['update:modelValue'],
  data() {
    return {
      educationList: this.modelValue.length > 0 ? [...this.modelValue] : [this.getDefaultEducation()]
    }
  },
  watch: {
    modelValue: {
      handler(newVal) {
        this.educationList = newVal.length > 0 ? [...newVal] : [this.getDefaultEducation()]
      },
      deep: true
    },
    educationList: {
      handler(newVal) {
        this.$emit('update:modelValue', newVal)
      },
      deep: true
    }
  },
  methods: {
    getDefaultEducation() {
      return {
        school: '',
        major: '',
        degree: '',
        period: []
      }
    },
    addEducation() {
      this.educationList.push(this.getDefaultEducation())
    },
    removeEducation(index) {
      if (this.educationList.length > 1) {
        this.educationList.splice(index, 1)
      }
    }
  }
}
</script>

<style scoped>
.education-list-form {
  margin-bottom: 24px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #409eff;
}

.empty-state {
  margin: 20px 0;
}

.education-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.education-item {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 20px;
  background: #fafafa;
}

.education-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e4e7ed;
}

.education-title {
  font-weight: 600;
  color: #409eff;
  font-size: 14px;
}
</style> 